<template>
  <div class="page-task">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="show">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        v-if="show"
      >

      <div v-for="item in list" :key="item" :title="item" class="page-task-item" @click="hanlderItem(item)">
        <div class="page-task-hd f-14">{{ item.creatorTime }}</div>
        <div class="page-task-title mt-8 f-14">
          {{item.taskName}}
        </div>
        <!-- <div class="mt-8">
          <task-item :total="a.totalScore" :value="a.scoreNum" v-for="(a, index) in item.userScoreList" :key="index">
            <div>
              {{ a.userInfo.username }}
            </div>
            <div>
            </div>
          </task-item>
        </div> -->
        <div class="page-task-footer mt-24 flex-row space-between align-items-center">
          <!-- <div class="page-task-usericon gray-color flex-row space-between align-items-center">{{ item.submitNum }}人已投票</div> -->
          <div class="color-green" v-if="item.submit">
            已评价
          </div>
          <div class="gray-color" v-if="!item.submit">
            待评价
          </div>
          <!-- <div class="gray-color" v-if="item.status == 2">
            已结束
          </div>  -->
        </div>
       
      </div>
      </van-list>
    </van-pull-refresh>
    <div class="page-task-auth" v-if="!show">
      <van-loading size="24px" color="#0094ff" vertical>用户授权中...</van-loading>
    </div>
    <page-permission v-if="isPermission" :title="title"></page-permission>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import taskItem from './component/pross.vue'
import { useRouter } from 'vue-router'
import { taskPage, logion } from '@/api/api'
import { setKeyItem, getToken } from '@/utils/auth'
import { getTime } from '@/utils/utils'
import pagePermission from './component/permission.vue'
const show = ref(false)
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const isPermission = ref(false)
const router = useRouter()
const total = ref(0)
const timer = ref(null)
const querySearch = ref({})
const title = ref('暂无权限')
const page = ref({
  pageNum: 1,
  pageSize: 10
})
const onLoad = () => {
  console.log('------------------onLoad------------------------', refreshing.value)
  if (refreshing.value) {
    list.value = [];
    refreshing.value = false;
  }
 console.log('------------------q请求接口之前------------------------')
  taskPage({
    ...page.value,
    ...querySearch.value
  }).then(res => {
    total.value = res.resData.count
    list.value = list.value.concat(res.resData.data.map(item => {
      return {
        ...item,
        creatorTime: getTime(item.creatorTime/1000 , 'time')
      }
    }))
    loading.value = false;
    if (total.value <= list.value.length) {
      finished.value = true;
      return
    }else {
      page.value.pageNum++
    }
  })


  // setTimeout(() => {
  //   if (refreshing.value) {
  //     list.value = [];
  //     refreshing.value = false;
  //   }

  //   for (let i = 0; i < 10; i++) {
  //     list.value.push(list.value.length + 1);
  //   }
  //   loading.value = false;

  //   if (list.value.length >= 40) {
  //     finished.value = true;
  //   }
  // }, 1000);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};


const hanlderItem = (e) => {
  router.push({
    path: '/task/detail', 
    query:{
      id: e.id
    }
  })
}

const getInit = () => {
  dd.ready(function () {
    dd.getAuthCode({
    corpId: 196729
    }).then(data => {
      console.log('--------getAuthCode-------', data)
      logion({
        authCode: data.code
      }).then(res => {
        console.log('-----------获取到用户信息---------------', res.resData)
        setKeyItem('token', res.resData.token)
        show.value = true
      }).catch(() => {
        isPermission.value = true
      })
    }).catch(err => {
      title.value = "请使用浙政钉扫码"
      isPermission.value = true 
    })
  })
}

const setTitle = () => {
  document.title= '督考测评系统'
}

onUnmounted(() => {
  clearTimeout(timer.value)
})

onMounted(() => {
  if (getToken()) {
    show.value = true
    return
  } 
  getInit()
 
  timer.value = setTimeout(() => {
    setTitle()
  }, 50)
  // onLoad();
});

</script>

<style lang="scss" scoped>
.page-task{
  min-height: 100vh;
  background: #f5f8fc;
  padding: 12px 0;
  &-hd{
    background: url('@/assets/icon/timeicon.png') center left no-repeat;
    background-size: 24px auto;
    padding-left: 28px;
  }
  &-item{
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.06);
    margin: 0 12px 12px 12px;

  }
  &-usericon{
    background: url('@/assets/icon/usericon.svg') center left no-repeat;
    background-size: 16px auto;
    padding-left:16px;
    height: 24px;
    line-height: 24px;
  }

  &-auth{
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
  }
}
</style>